<template>
    <el-main>
        <div style="border-bottom: 1px solid rgb(204, 204, 204);">
            <h3>保养项目</h3>
            <h4 style="margin:15px 0">保养项目列表</h4>
        </div>
        <div style="margin-top: 15px">
            <el-button type="success" @click="add()" round>新增</el-button>
            <el-button type="danger" :disabled="this.multipleSelection.length===0" @click="delMaintenanceProgram" round>
                删除
            </el-button>
            <el-button type="primary"
                       :disabled="this.multipleSelection.length===0||this.multipleSelection.length>1"
                       @click="upd"
                       round>编辑
            </el-button>
            <div style="margin-left: 1200px;margin-top: -30px">
                <el-input placeholder="请输入项目编号" size="medium" v-model="programCoding" class="input-with-select"
                          style=" width: 400px;">
                    <el-button slot="append" icon="el-icon-search" @click="selBySpare"></el-button>
                </el-input>
                <i class="el-icon-menu" style="margin-left: 3px;margin-top: 3px;height: 30px;width: 30px;color: #C7CDD9"
                   @click="showSpare=true"></i>
            </div>


        </div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="programId" label="序号">
            </el-table-column>
            <el-table-column prop="programCoding" label="保养项目编号">
            </el-table-column>
            <el-table-column prop="programName" label="保养项目名称">
            </el-table-column>
            <el-table-column prop="maintenanceSite" label="保养部位">
            </el-table-column>
            <el-table-column prop="maintenanceLevel" label="保养级别" :formatter="formatMaintenanceLevel">
            </el-table-column>
            <el-table-column prop="programState" label="状态">
                <template slot-scope="scope">
                    {{ scope.row.programState === 1 ? '开启' : '关闭' }}
                </template>
            </el-table-column>
            <el-table-column prop="maintenanceRequirement" label="保养要求">
            </el-table-column>
            <el-table-column prop="comment" label="备注">
            </el-table-column>
            <el-table-column prop="operator" label="操作人">
            </el-table-column>
            <el-table-column prop="updateTime" label="操作时间">
            </el-table-column>
        </el-table>
        <!-- 分页功能-->
        <el-pagination
                :current-page.sync="MaintenanceProgram.page"
                :page-size="MaintenanceProgram.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :total="total"
                background
                layout="total, sizes ,prev, pager, next, jumper"
                style="padding: 30px 0; text-align: center"
                @current-change="selMaintenanceProgram"
                @size-change="handleSizeChanges"
        />

        <div>
            <!--  新增弹框  -->
            <el-drawer
                    :title="names"
                    :before-close="cancelForm"
                    :visible.sync="dialog"
                    direction="rtl"
                    custom-class="demo-drawer"
                    ref="drawer"
            >
                <div class="demo-drawer__content">
                    <el-form ref="form" :rules="rules" :model="form">
                        <el-form-item label="保养项目编号:" prop="location" style="margin-left: 80px">
                            <el-input disabled size="medium" placeholder="系统自动生成" style="width: 300px"
                                      v-model="form.programCoding"></el-input>
                        </el-form-item>
                        <el-form-item label="保养项目名称:" prop="location" style="margin-left: 80px">
                            <el-input size="medium" style="width: 300px" v-model="form.programName"></el-input>
                        </el-form-item>
                        <el-form-item label="保养部位:" prop="location" style="margin-left: 110px">
                            <el-input size="medium" style="width: 300px" v-model="form.maintenanceSite"></el-input>
                        </el-form-item>
                        <el-form-item label="保养级别:" style="margin-left: 110px" size="medium">
                            <el-select v-model="form.maintenanceLevel" clearable placeholder="请选择保养级别">
                                <el-option v-for="(item,index) in MaintenanceLevelList" :key="item.levelId"
                                           :value="item.levelId"
                                           :label="item.levelName"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态:" prop="location" style="margin-left: 140px">
                            <el-radio v-model="form.programState" :label=1>开启</el-radio>
                            <el-radio v-model="form.programState" :label=2>关闭</el-radio>
                        </el-form-item>
                        <el-form-item label="保养要求:" prop="remark" style="margin-left: 110px">
                            <el-input style="width: 300px" type="textarea"
                                      v-model="form.maintenanceRequirement"></el-input>
                        </el-form-item>
                        <el-form-item label="备注:" prop="remark" style="margin-left: 140px">
                            <el-input style="width: 300px" type="textarea" v-model="form.comment"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="demo-drawer__footer" style="margin:50px 200px">
                        <el-button class="my-button" @click="cancelForm">取 消</el-button>
                        <el-button class="my-button" type="primary" @click="save(isEdit)" :loading="loading">
                            {{ loading ? '提交中 ...' : '确 定' }}
                        </el-button>
                    </div>
                </div>
            </el-drawer>

        </div>


        <!--弹出层模糊查信息-->
        <div v-if="showSpare"
             style="width: 700px;
             height: 270px;
             background: white;
             position: relative;
             left: 920px;
             top:-490px;
             z-index: 900;
             border: 1px solid #F4F4F4;
             border-radius: 4px">
            <el-form ref="form" :model="MaintenanceProgram" label-width="100px">
                <el-form-item label="保养项目编号" style="margin-top: 20px">
                    <el-input v-model="MaintenanceProgram.programCoding" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="保养项目名称">
                    <el-input v-model="MaintenanceProgram.programName" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="保养部位">
                    <el-input v-model="MaintenanceProgram.maintenanceSite" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="保养级别">
                    <el-select v-model="MaintenanceProgram.maintenanceLevel" clearable placeholder="保养级别">
                        <el-option v-for="(item,index) in MaintenanceLevelList" :key="item.levelId"
                                   :value="item.levelId"
                                   :label="item.levelName"/>
                    </el-select>
                </el-form-item>
                <div style="margin-left: 320px;position: relative;top: -190px">
                    <el-form-item label="状态">
                        <el-select v-model="MaintenanceProgram.programState" placeholder="请选择活动区域">
                            <el-option label="启动" value=1></el-option>
                            <el-option label="停用" value=2></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作人">
                    </el-form-item>
                    <el-form-item label="操作时间">
                        <el-date-picker type="updateTime" v-model="MaintenanceProgram.updateTime"></el-date-picker>
                    </el-form-item>
                </div>
            </el-form>
            <div style="width: 100%;height: 50px;border-top: 1px solid #F4F4F4;margin-top: -170px">
                <el-button @click="showSpare =  false">关闭</el-button>
                <el-button @click="empty()" style="margin-top: 10px;margin-left: 20px">清空</el-button>
                <div style="margin-left: 590px;margin-top: -28px">
                    <el-button type="success" @click="selBySpare">查询</el-button>
                </div>
            </div>
        </div>
    </el-main>
</template>

<script>
export default {
    name: "Devicetype",
    data() {

        return {
            MaintenanceLevelList: [],//保养级别信息
            tableData: [],
            multipleSelection: [],//多选框选择数据
            showSpare: false,
            //模糊查数据
            programCoding: '',
            MaintenanceProgram: {
                page: 1,
                pageSize: 10,
                programName: null,
                maintenanceSite: null,
                maintenanceLevel: null,
                programState: null,
                operator: null,
                updateTime: null,
                programCoding: null,
            },
            //分页数据
            total: 0,
            names: '',
            dialog: false, //抽屉弹窗开关
            loading: false,
            timer: null,//表单动画所需属性
            isEdit: true,//判断是新增还是修改，true是修改，false为新增

            form: {//新增数据
                programCoding: '', //保养项目编号
                programName: '',//保养项目名称
                maintenanceSite: '', //保养部位
                maintenanceLevel: null,//保养级别
                programState: 0, //状态
                maintenanceRequirement: '', //保养要求
                comment: '',//备注

            },

            rules: {//定义添加验证表单规则
                locationName: [
                    {required: true, message: '存放位置', trigger: 'blur'},
                    {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
                ],
                state: [
                    {required: true, message: '请选择状态', trigger: 'blur'},
                ],

            },
        }
    },
    methods: {
        //保养级别回显名称
        formatMaintenanceLevel(row) {
            const levelId = row.maintenanceLevel;
            const levelObj = this.MaintenanceLevelList.find(obj => obj.levelId === levelId);
            return levelObj ? levelObj.levelName : '';
        },
        //编辑保养项目
        updateMaintenanceProgram() {
            this.request.post("/maintenance/maintenance-program/updateMaintenanceProgram", this.form)
                .then(res => {
                    console.log(res)
                    if (res.code === '200') {
                        this.dialog = false // 关闭弹窗
                        this.xiugaiOpen1() // 编辑成功通知
                        this.selMaintenanceProgram()//调用全查
                    } else {
                        this.xiugaiOpen4() // 编辑失败通知
                        this.dialog = false // 关闭弹窗
                    }
                })
        },
        //新增保养项目
        insMaintenanceProgram() {
            this.request.post("maintenance/maintenance-program/insMaintenanceProgram", this.form)
                .then(res => {
                    console.log(res)
                    if (res.code === '200') {
                        this.dialog = false // 关闭弹窗
                        this.tianjiaOpen1() // 添加成功通知
                        this.selMaintenanceProgram()//调用全查
                    } else {
                        this.tianjiaOpen4() // 添加失败通知
                        this.dialog = false // 关闭弹窗
                    }
                })
        },
        // 编辑成功通知
        xiugaiOpen1() {
            this.$notify({
                title: '成功',
                message: '编辑成功',
                type: 'success'
            });
        },
        // 编辑失败通知
        xiugaiOpen2() {
            this.$notify.error({
                title: '错误',
                message: '编辑失败'
            })
        },
        // 添加成功通知
        tianjiaOpen1() {
            this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success'
            });
        },
        // 添加失败通知
        tianjiaOpen4() {
            this.$notify.error({
                title: '错误',
                message: '添加失败'
            })
        },

        //点击新增
        add() {
            this.dialog = true
            this.isEdit = false
            this.names = "新增"
        },


        //点击编辑
        upd() {
            this.dialog = true
            this.isEdit = true
            this.names = "编辑"
            this.mod()
        },
//          新增弹窗取消
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },
        //提交表单时判断是编辑还是新增
        save(val) {
            if (val) {
                //编辑
                this.updateMaintenanceProgram()
            } else {
                //新增
                this.insMaintenanceProgram()
            }
            this.selMaintenanceProgram()
        },
        //修改信息
        mod() {
            this.form = this.multipleSelection[0]
            console.log(this.form)
        },

        //批量删除
        delMaintenanceProgram() {
            console.log(this.multipleSelection)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //获取删除对象id
                var ids = this.multipleSelection.map(obj => obj.programId);
                console.log(ids)
                this.request.post("maintenance/maintenance-program/delMaintenanceProgram", ids
                ).then(res => {
                    if (res.code == '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'

                        });
                        this.selMaintenanceProgram()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //模糊查按钮
        selBySpare() {
            this.selMaintenanceProgram()
        },
        //清空
        empty() {
            this.MaintenanceProgram.programCoding = ''
            this.MaintenanceProgram.programName = ''
            this.MaintenanceProgram.maintenanceSite = ''
            this.MaintenanceProgram.maintenanceLevel = null
            this.MaintenanceProgram.programState = null
            this.MaintenanceProgram.updateTime = null
        },
        //查询保养级别信息
        selMaintenanceLevel() {
            this.request.get("maintenance/maintenance-program/selMaintenanceLevel").then(res => {
                this.MaintenanceLevelList = res.data
                console.log(this.MaintenanceLevelList)
            })
        },


        //分页模糊全查类型信息
        selMaintenanceProgram() {
            if (this.programCoding == '') {
                this.request.post("maintenance/maintenance-program/selMaintenanceProgram", this.MaintenanceProgram).then(res => {
                    this.tableData = res.data.content
                    this.total = res.data.total
                    console.log(this.tableData)
                })
            } else {
                this.MaintenanceProgram.programCoding = this.programCoding
                this.request.post("maintenance/maintenance-program/selMaintenanceProgram", this.MaintenanceProgram).then(res => {
                    this.tableData = res.data.content
                    this.total = res.data.total
                })
            }

        },

        //分页跳转数据
        handleSizeChanges(pageSize) {
            debugger
            this.MaintenanceProgram.pagesize = pageSize;
            console.log(this.MaintenanceProgram.pagesize)
            this.selMaintenanceProgram();
        },
        //多选框
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    //打开页面默认执行
    created() {
        this.selMaintenanceProgram()
        this.selMaintenanceLevel()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {

    }, //生命周期 - 创建之前
    beforeMount() {
        this.selMaintenanceLevel()
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
.el-main {
    padding: 0;
}
</style>
